<template>
  <div class="log-container ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="query"
        inline size="mini"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <el-row :gutter="15">
          <template v-if="logType == '0' || logType == '1' || logType == '2'">
            <el-form-item label="IMEI:">
              <el-input
                  clearable
                  v-model="query.imei"
                  placeholder="请输入设备IMEI"
              />
            </el-form-item>
            <el-form-item label="指令:">
              <el-input
                  clearable
                  v-model="query.command"
                  placeholder="请输入指令"
              />
            </el-form-item>
          </template>
          <template v-if="logType == '0' || logType == '1'">
            <el-form-item label="关键字:">
              <el-input
                  clearable
                  v-model="query.kw"
                  placeholder="请输入关键字"
              />
            </el-form-item>
            <el-form-item label="状态:">
              <el-select
                  v-model="query.status"
                  placeholder="请选择"
                  style="width:100%;"
              >
                <el-option label="正常" :value="1"> </el-option>
                <el-option label="离线" :value="2"> </el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="logType == '2'">
            <el-form-item label="序列号:">
              <el-input
                  clearable
                  v-model="query.sn"
                  placeholder="请输入序列号"
              />
            </el-form-item>
            <el-form-item label="终端手机号:">
              <el-input
                  clearable
                  v-model="query.mobile"
                  placeholder="请输入终端手机号"
              />
            </el-form-item>
          </template>
          <template v-if="logType == '3'">
            <el-form-item label="用户名:">
              <el-input
                  clearable
                  v-model="query.username"
                  placeholder="请输入用户名"
              />
            </el-form-item>
          </template>
          <el-form-item
              label="发送时间:"
              v-if="logType == '0' || logType == '1'"
          >
            <el-date-picker
                v-model="dateRange"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @keyup.enter.native="handleQuery"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="登录时间:" v-if="logType == '3'">
            <el-date-picker
                v-model="dateRange"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @keyup.enter.native="handleQuery"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="创建时间:" v-if="logType == '2'">
            <el-date-picker
                v-model="dateRange"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @keyup.enter.native="handleQuery"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="reload"
            >查询
            </el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="toolbar-box" style="margin-bottom:4px;">
        <div class="tool-btn">
          <!-- <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="removeBatch"
            >删除</el-button
          > -->
          <el-button
              size="mini"
              type="default"
              v-if="logType != '3'"
              icon="el-icon-download"
              @click="exportTable"
          >导出</el-button
          >
        </div>
        <div class="tool-tab">
          <ul>
            <li :key="i" v-for="(item, i) in tabList">
              <span
                @click="tabchanged(item.type)"
                :class="{ active: logType == i }"
                >{{ item.value }}</span
              >
            </li>
          </ul>
        </div>

      </div>
      <UpLinkLog ref="uplinklog" v-if="logType == '0'" />
      <DownLinkLog ref="downlinklog" v-else-if="logType == '1'" />
      <TelecomUpLinkLog ref="telecomuplink" v-else-if="logType == '2'" />
      <LoginLog ref="loginlog" v-else-if="logType == '3'" />
    </el-card>
  </div>
</template>
<script>
import UpLinkLog from "./components/uplinkLog";
import DownLinkLog from "./components/downlinkLog";
import LoginLog from "./components/loginLog";
import TelecomUpLinkLog from "./components/telecomUplinkLog";
export default {
  name: "DeviceLog",
  components: {
    UpLinkLog,
    DownLinkLog,
    LoginLog,
    TelecomUpLinkLog
  },
  data() {
    return {
      // 加载状态
      loading: false,
      // 搜索条件
      query: {},
      dateRange: [],
      logType: "0",
      tabList: [
        {
          type: "0",
          value: "上行日志"
        },
        {
          type: "1",
          value: "下行日志"
        },
        {
          type: "2",
          value: "电信上行日志"
        },
        {
          type: "3",
          value: "登录日志"
        }
      ]
    };
  },
  methods: {
    /* 查询数据 */
    reload() {
      if (this.dateRange.length > 1) {
        if (this.logType != 3) {
          this.query.start_time = this.dateRange[0];
          this.query.end_time = this.dateRange[1];
        } else {
          this.query.time_s = this.dateRange[0];
          this.query.time_e = this.dateRange[1];
        }
      }
      console.log(this.$refs.downlinklog);
      switch (this.logType) {
        case "0":
          this.$refs.uplinklog.getData(this.query);
          break;
        case "1":
          this.$refs.downlinklog.getData(this.query);
          break;
        case "2":
          this.$refs.telecomuplink.getData(this.query);
          break;
        case "3":
          this.$refs.loginlog.getData(this.query);
          break;
      }
    },
    /* 重置搜索 */
    reset() {
      this.query = {};
      this.dateRange = [];
      this.reload();
    },
    tabchanged(type) {
      this.logType = type;
      this.query = {};
      this.dateRange = [];
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的型号吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.$http
            .post("", { id: this.ids })
            .then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.getData();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },
    /* 导出 */
    exportTable() {
      switch (this.logType) {
        case "0":
          this.$refs.uplinklog.exportData();
          break;
        case "1":
          this.$refs.downlinklog.exportData();
          break;
        case "2":
          this.$refs.telecomuplink.exportData();
          break;
        case "3":
          this.$refs.loginlog.exportData();
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.toolbar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tool-tab {
    height: 32px;
    ul {
      height: 100%;
      display: flex;
      list-style: none;
      align-items: center;
      li {
        height: 100%;
        padding: 0 10px;
        border-right: 2px solid #ddd;
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          padding-right: 0;
          border-right: 0;
        }
        span {
          display: block;
          font-size: 14px;
          cursor: pointer;
          padding: 7px 10px;
          border-radius: 4px;
          border: 1px solid #ddd;
          &.active {
            color: #ffffff;
            border-color: #0f40f5;
            background: #0f40f5;
          }
        }
      }
    }
  }
}
</style>
